import { useState } from 'react';

type Msg = { id: string; patient: string; last: string; unread: number };
const init: Msg[] = [
  { id: 'C001', patient: '赵六', last: '医生，我发烧两天了', unread: 1 },
  { id: 'C002', patient: '孙七', last: '咳嗽有痰，需要吃药吗', unread: 0 },
];

export default function ProviderConsults() {
  const [inbox, setInbox] = useState(init);
  const [active, setActive] = useState<Msg | null>(null);
  const [text, setText] = useState('');

  function open(msg: Msg) {
    setActive({ ...msg, unread: 0 });
    setInbox(list => list.map(i => i.id === msg.id ? { ...i, unread: 0 } : i));
  }

  return (
    <div className="grid grid-cols-3 gap-3 px-4 pb-20">
      <div className="col-span-1 space-y-2">
        {inbox.map(m => (
          <button key={m.id} onClick={() => open(m)} className="w-full rounded-xl border bg-white p-3 text-left shadow-sm hover:border-brand-500">
            <div className="flex items-center justify-between">
              <div className="font-medium text-gray-900">{m.patient}</div>
              {m.unread > 0 && <span className="rounded-full bg-red-500 px-2 py-0.5 text-xs text-white">{m.unread}</span>}
            </div>
            <div className="text-sm text-gray-600 truncate">{m.last}</div>
          </button>
        ))}
      </div>
      <div className="col-span-2 rounded-2xl bg-white p-4 shadow-sm flex flex-col">
        {!active ? (
          <div className="text-sm text-gray-500">选择左侧会话进行回复</div>
        ) : (
          <>
            <div className="font-medium mb-2">{active.patient} · 会话 {active.id}</div>
            <div className="flex-1 rounded-xl bg-gray-50 p-3 mb-3 text-sm text-gray-700 overflow-auto">
              <div>患者：{active.last}</div>
              <div className="mt-2">系统：请结合症状询问病史，并给出初步建议</div>
            </div>
            <div className="flex gap-2">
              <input value={text} onChange={e => setText(e.target.value)} placeholder="回复内容" className="flex-1 rounded-xl border bg-white px-3 py-2 text-sm" />
              <button className="rounded-xl bg-brand-600 px-4 py-2 text-white text-sm" onClick={() => setText('')}>发送</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}


